<template>
  <div>
    <div class="cus" v-if="show">
      <div class="cus_box" style="width:1000px;">
        <div class="title"><span>使用记录</span> <i @click="show=false" class="el-icon-close"></i></div>
        <div class="content">

          <el-form :inline="true" :model="dataForm" ref="dataForm" label-width="auto">
            <el-form-item label="" prop="adName">
              <!--              <el-input v-model="orderNo" type="text" placeholder="订单编号" style="width:150px;" clearable></el-input>-->
              <el-input v-model="sn" type="text" placeholder="设备编号" style="width:150px;" clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="" prop="adName">
              <el-date-picker v-model="date" type="daterange" value-format="yyyyMMdd"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button @click="getData" type="primary">搜索</el-button>
            </el-form-item>

          </el-form>

          <el-table :data="tableData" height="250" highlight-current-row border style="width: 100%">
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="ctime" label="时间" width="180">
            </el-table-column>
            <el-table-column prop="deviceType" label="操作设备类型">
            </el-table-column>
            <el-table-column prop="sn" label="设备编号">
            </el-table-column>
            <el-table-column prop="remake" label="操作详情">
            </el-table-column>
          </el-table>

          <div class="btns">
            <el-button type="primary" @click="show=false">关闭</el-button>
            <!--          <el-button type="primary" @click="dataFormSubmit()">关联</el-button>-->
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { isMobile } from '@/utils/validate'
export default {
  data() {
    var validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    };
    return {
      show: false,
      dataForm: {

      },
      loading: false,

      tableData: [],

      sn: '',
      maintenancerId: '',
      date: '',
      beginTime: '',
      endTime: ''

    }
  },
  watch: {
    date(val) {
      console.log(val);
      if (val) {
        this.beginTime = val[0];
        this.endTime = val[1];
      } else {
        this.beginTime = '';
        this.endTime = '';
      }
    }
  },
  computed: {

  },
  components: {

  },


  mounted() {

  },
  methods: {
    async getData() {
      const res = await this.apis.maintenancer_oprList({
        pageNum: 1,
        pageSize: 100000,
        maintenancerId: this.maintenancerId,
        sn: this.sn,
        beginTime: this.beginTime,
        endTime: this.endTime
      });
      const list = res.rows || [];
      this.tableData = list;
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {

        }
      })
    },
    showFun(row) {
      this.maintenancerId = row.id;
      this.show = true;
      this.getData();
    }

  }
}
</script>
<style scoped lang='scss'>
</style>
